<template>
	<view >
		<!-- 搜索 -->
		<view class="cu-bar search bg-white shadow">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input  placeholder="搜索拼团邀请码商品" class="uni-input" type="text" 
					:value="data" @input="dataChange"/>
			</view>
			<view class="action">
				<!-- <text style="font-size: 150%;" class="cuIcon-scan"></text> -->
				<view class="cu-btn bg-blue round" @click="searchPtCode">搜索</view>
			</view>
		</view>
		<!-- 搜索 -->
		<!-- 普通拼团商品 -->
		<view v-if="isShow">
			<view class="">
				<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590850163225&di=5564067632f62daad31ca9d5efb3fb59&imgtype=0&src=http%3A%2F%2Fimage.xghylt.com%2Fforum%2F201712%2F21%2F110528yqdenajc52jhjj7h.jpg.thumb.jpg" mode="aspectFill" lazyLoad></image>
			</view>
			<view class="cu-card article">
				<view class="cu-item shadow bg-white" v-for="(item, index) in goods" :key="index" @tap="clickGoods(index)">
				<view class="nav-list" >
					<view hover-class="none" class="nav-li " 
					:style="[{ backgroundImage:'url('+item.ptGoodsThnmb+')' }]">
					<view class="cu-tag-title bg-cyan"
					  style="">{{item.ptGoodsName}}</view>
					</view>
					<view class="nav-li-r">
						<view class="nav-name">{{item.description}}</view>
						<text class=" nav-price" >单独价格
						<text class="text-price"></text>
						{{item.price}}</text>
						<text class=" nav-ptPrice text-red" >拼团价格
						<text class="text-price text-xl">{{item.ptPrice}}</text></text>
						<text class=" nav-text" >库存{{item.ptGoodsNum}}件</text>
					</view>
				</view>	
				</view>
			</view>
		</view>

	<!-- 普通拼团商品 -->
	<!-- 搜索后拼团商品 -->
	<view v-else>
		<!-- 取消按钮 -->
		<view class="cu-card flex justify-center align-center">
			<view class="cu-item shadow bg-white" @click="clickCancel">
				<text class="cuIcon-roundclose text-red" style="font-size: 25px; margin: 0 10px;"></text>
			</view>				
		</view>
		<!-- 取消按钮 -->
		<view class="cu-card article">
			<view class="cu-item shadow bg-white" v-for="(item, index) in searchGoods" :key="index" @tap="clickGoods(index)">
			<view class="nav-list" >
				<view hover-class="none" class="nav-li " 
				:style="[{ backgroundImage:'url('+item.ptGoodsThnmb+')' }]">
				<view class="cu-tag-title bg-cyan"
				  style="">{{item.ptGoodsName}}</view>
				</view>
				<view class="nav-li-r">
					<view class="nav-name">{{item.description}}</view>
					<text class=" nav-price" >单独价格
					<text class="text-price"></text>
					{{item.price}}</text>
					<text class=" nav-ptPrice text-red" >拼团价格
					<text class="text-price text-xl">{{item.ptPrice}}</text></text>
					<text class=" nav-text" >库存{{item.ptGoodsNum}}件</text>
				</view>
			</view>	
			</view>
		</view>
	</view>
    <!-- 搜索后拼团商品 -->
		
	</view>

</template>

<script>
	export default{
		data(){
			return{
				params: {
				  //获取更多的参数
				  limit: 10,
				  skip: 0
				},
				goods:[],
				searchGoods:[],//搜索ptCode所得商品
				data:null,//搜索框输入值
				isShow:true//true为正常页面,false为搜索结果页面
			}
		},
		mounted() {
			this.getGoods();
		},
		methods:{
			clickGoods(index){
				//console.log(this.goods[index].id)
				uni.navigateTo({
					url: './collageDetail/index?id='+this.goods[index].id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getGoods(){
				this.request({
				  url:
				    this.apiServer +
				    "/ptGoods/findPtGoods?limit=" +this.params.limit+"&skip="+this.params.skip
				}).then(res => {
				  console.log(res);
				  this.goods = res.data;
				});
			},
			dataChange: function (e) {//搜索框数据改变
				this.data = e.detail.value;
			},
			clickCancel(){
				this.isShow=true;
			},
			searchPtCode(){//搜索ptCode商品
				var data = this.data;
				console.log(data)					
				if(data!=null)
				{
				this.request({
					url: this.apiServer + '/ptInfo/findAllPtByPtCode?limit=1&skip=0&ptCode='+data
				}).then(res => {
					console.log(res);
					if(res.msg=="操作成功!")
					{
					uni.showToast({
						title: "查找成功"
					});
					// this.classList = [res.data];	
					    // this.searchGoods=[res.data];
					    // this.isShow=false;
						console.log(res.data[0].ptGoodsId)
						this.request({
							url: this.apiServer + '/ptGoods/findPtGoodsById?Id='+res.data[0].ptGoodsId
						}).then(newRes=>{
							this.searchGoods=[newRes.data];
							this.isShow=false;
						})
					}else{
					uni.showToast({
						title: "没有这个课",
						image: "../../static/icon/error.png"
					})	
					}
					this.data=null;
				});				
				}else{
				uni.showToast({
					title: "请重新输入",
					image:"../../static/icon/error.png"
				})	
				}
			},
		}
	}
</script>

<style>
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 20upx 0px;
		justify-content: space-between;
	}
	
	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 35%;
		height: 220upx;
		margin: 20upx 1% 0upx;	
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		
	}
	
	.nav-li-r {
		padding: 5upx;
		border-radius: 12upx;
		width: 61%;
		margin: 20upx 0.5% 20upx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}
	
	.nav-li::after{
		content: '';
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 5upx;
		position: relative;
	}
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	
	.nav-text{
		position: absolute;
		right: -30upx;
		bottom: -50upx;
		font-size: 25upx;
		width: 150upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	.nav-price{
		position: absolute;
		left:5upx;
		bottom:5upx;
		font-size: 25upx;
		width: 200upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	.nav-ptPrice{
		position: absolute;
		left: 15upx;
		bottom: -40upx;
		font-size: 25upx;
		width: 200upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
    .cu-tag-title {
    	font-size: 24upx;
    	vertical-align: middle;
    	position: absolute;
    	left: -20upx;
    	top: -10upx;
        border-radius: 20rpx;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	box-sizing: border-box;
    	padding: 0upx 16upx;
    	height: 48upx;
    	font-family: Helvetica Neue, Helvetica, sans-serif;
    	white-space: nowrap;	
    
    }
</style>
